<!--
 * @FileDescription 定义表
 * @Author 杨宇翔
 * @Date 20220610 15:33:58
 * @LastEditors 杨宇翔
 * @LastEditTime 20220610 15:33:58
-->
<template>
    <div class="container">
        <table v-show="ProtocolComponent.Default.Data.value.length > 0">
            <tbody>
                <tr v-for="index of rows" :key="index">
                    <td v-for="(byte, offset) of ProtocolComponent.Default.Data.value.slice(column * index, column * (index + 1))"
                        :key="offset">
                        <span>{{ byte.toString(16).toUpperCase().padStart(2, '0') }}</span>
                        <span>{{ Calculate(column * index + offset + 1) }}</span>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import { ProtocolComponent } from './InertialNavigationComponent';

const rows = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
const column = 8;

const map = [1, 3, 4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 68, 72, 76, 78, 80];

function Calculate(item: number): string {
    const index = map.indexOf(item);
    return index == -1 ? '' : `${index + 1}`;
}
</script>

<style scoped>
::-webkit-scrollbar {
    width: 0.6rem;
    height: 0.6rem;
}

::-webkit-scrollbar-thumb {
    background: rgba(129, 133, 156, 0.5);
    border-radius: 0.5rem;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(129, 133, 156, 1);
}

::-webkit-scrollbar-track {
    border-radius: 0.5rem;
    background-color: rgba(129, 133, 156, 0.1);
}

.container {
    max-height: 32rem;
    overflow-y: overlay;
}

table {
    height: 100%;

    margin-top: 2rem;
    margin-left: 4rem;
    margin-right: 4rem;
}

td {
    position: relative;

    width: 12.5rem;
    height: 4.5rem;
}

th {
    color: #B1B1D4;
    font-size: 1.6rem;
    font-weight: 500;

    text-align: center;
}

td {
    text-align: center;
}

td>span:first-of-type {
    color: #B1B1D4;
    font-size: 2.4rem;
    font-weight: bold;
}

td>span:last-of-type:empty {
    display: none;
}

td>span:last-of-type {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);

    display: inline-block;
    width: 2.4rem;
    height: 2.4rem;

    color: #0E0E15;
    font-size: 1.6rem;
    font-weight: 500;

    border-radius: 50%;
    background-color: #36B555;
}
</style>